<template>
  <el-container>
    <el-container>
      <el-main>
        <el-row class="function-button" style="margin-bottom: 20px">
          <el-button type="success" size="small" round @click="refresh()"
            >刷新按钮</el-button
          >
          <el-date-picker
            style="width: 20%; margin-left: 500px"
            type="datetimerange"
            v-model="queryParam.deliveryTime"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
          <el-button round style="margin-left: 10px" @click="queryByCondition"
            >查询</el-button
          >
        </el-row>
        <template>
          <el-table
            ref="resumeDeliveryable"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            v-loading="loading"
            :data="resumeDeliveryList"
            fit
            border
            max-height="700"
            size="medium "
            highlight-current-row
            row-key="id"
            @cell-click="description != '学生用户' ? 'handleCellClick' : ''"
            tooltip-effect="dark"
          >
            <el-table-column prop="id" label="编号" width="100">
            </el-table-column>
            <el-table-column prop="resumeId" label="简历编号">
            </el-table-column>
            <el-table-column prop="jobName" label="岗位名称" width="150">
              <template slot-scope="scope">
                <span :class="description != '学生用户' ? 'job-name' : ''">{{
                  scope.row.jobName
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="studentName" label="学生名称" width="150">
            </el-table-column>
            <el-table-column prop="companyName" label="公司名称" width="150">
            </el-table-column>
            <el-table-column prop="deliveryTime" label="投递时间">
              <template slot-scope="scope">
                {{ scope.row.deliveryTime | dateFMT }}
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
              <template slot-scope="scope">
                {{ scope.row.state === 0 ? '未查看' : '已查看' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="viewTime"
              v-if="description === '学生用户' ? false : true"
              label="查看时间"
            >
              <template slot-scope="scope">
                {{ scope.row.viewTime | dateFMT }}
              </template>
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              v-if="description === '学生用户' ? false : true"
              width="150"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  @click.stop="handleView(scope.row)"
                  size="small"
                  >查看</el-button
                >
                <el-button
                  type="danger"
                  @click.stop="handDel(scope.row)"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import throttle from 'lodash/throttle'; //
import { mapGetters } from 'vuex';
import { reqQueryJobInfoById } from '../CompanyMng/api/PostPostingApi';
import { reqGetStudentInfoById } from '../StudentMng/api/studentApi';
export default {
  name: 'ResumeDeliveryMng',
  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      queryParam: {},
      jobInfo: {},
      condition: {
        loginId: this.$store.state.user.loginId, // 登录用户id
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {
    // 用户
    ...mapGetters(['name', 'description', 'loginId', 'avatar']),
    // 获取用户编号
    ...mapGetters('ResumeDeliveryStore', [
      'resumeDeliveryIPage',
      'resumeDeliveryList',
    ]),
  },
  watch: {
    resumeDeliveryIPage() {
      this.loading = false;
      if (this.resumeDeliveryIPage.currentPage) {
        this.currentPage = this.resumeDeliveryIPage.currentPage;
      }
      if (this.resumeDeliveryIPage.pageSize) {
        this.pageSize = this.resumeDeliveryIPage.pageSize;
      }
      if (this.resumeDeliveryIPage.total) {
        this.total = this.resumeDeliveryIPage.total;
      }
    },
  },
  mounted() {
    this.getResumeDeliveryList();
  },
  methods: {
    // 根据岗位id查询岗位信息
    async getJobByJobId(jobId) {
      return await reqQueryJobInfoById(jobId);
    },
    // 根据id来查询简历信息
    getResumeById(resumeId) {
      return this.$store.dispatch('ResumeMng/getResumeById', resumeId);
    },
    handleEdit(row) {
      this.$store.dispatch('ResumeDeliveryStore/editResumeDelivery', row);
    },
    // 点击查看
    async handleView(row) {
      // 更新state记录
      row.state = 1;
      this.handleEdit(row);
      // 获取学生头像
      let result = await reqGetStudentInfoById(row.studentId);
      let avatar = result.data.studentInfo.avatar;
      this.getResumeById(row.resumeId).then((res) => {
        // 获取
        // 跳转至学生简历预览界面
        this.$router.push({
          name: 'resumetemplate',
          params: {
            resumeRowInfo: { ...res.data.resumeInfo, avatar },
            companyEmploy: {
              jobId: row.jobId,
              resumeId: row.resumeId,
              studentId: row.studentId,
              companyId: row.companyId,
            },
          },
        });
      });
    },
    // 单击表格的某个单元格
    handleCellClick(row, column, cell, event) {
      if (column.label === '岗位名称') {
        this.getJobByJobId(row.jobId).then((res) => {
          this.jobInfo = res.data.jobInfo;
          // 城市字段回显映射
          let cityIds = res.data.jobInfo.workAddressId.split('-');
          this.jobInfo.addressId = cityIds;
          this.jobInfo.name = Number(this.jobInfo.name);
          // 路由跳转 -- 展示岗位信息
          this.$router.push({
            name: 'jobShowPage',
            params: {
              jobForm: this.jobInfo,
            },
          });
        });
      }
    },
    // 每页显示多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.getMenuTree();
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getMenuTree();
    },

    // 查询简历投递类别信息
    getResumeDeliveryList() {
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        condition: this.condition || {},
      };
      this.$store.dispatch('ResumeDeliveryStore/getResumeDeliveryList', params);
    },
    // 删除简历投递类别
    handDel(row) {
      let result;
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(async () => {
          result = await this.$store.dispatch(
            'ResumeDeliveryStore/delResumeDelivery',
            [row.id]
          );
          this.$message({
            message: result.message,
            type: 'success',
            duration: 2 * 1000,
          });
          this.getResumeDeliveryList();
        })
        .catch(() => {
          this.$message({
            message: '取消删除',
            type: 'info',
            duration: 2 * 1000,
          });
        });
    },
    // 刷新简历投递列表
    refresh: throttle(async function () {
      this.loading = true;
      this.currentPage = 1;
      await this.getResumeDeliveryList();
      this.$message({
        message: '刷新成功',
        type: 'success',
        duration: 1 * 1000,
      });
    }, 800),

    // 条件查询
    async queryByCondition() {
      // 起始发布日期
      let deliveryTimeStart = undefined;
      // 截止发布日期
      let deliveryTimeEnd = undefined;
      if (this.queryParam.deliveryTime) {
        if (this.queryParam.deliveryTime[0]) {
          deliveryTimeStart = this.queryParam.deliveryTime[0];
        }
        if (this.queryParam.deliveryTime[1]) {
          deliveryTimeEnd = this.queryParam.deliveryTime[1];
        }
      }
      // 初始化条件查询参数
      this.condition = {
        deliveryTimeEnd,
        deliveryTimeStart,
      };
      this.getResumeDeliveryList();
    },
  },
};
</script>

<style lang="scss" scoped>
// 分页插件居中对齐
.block {
  text-align: center;
}

// 简历投递标题样式
.job-name:hover {
  text-decoration-line: underline;
  color: cornflowerblue;
  cursor: pointer;
}
</style>
